<div class="{{prefixCls}}-notice {{prefixCls}}-notice-closable"
  [ngStyle]="apesMessage.options.apesStyle"
  [ngClass]="apesMessage.options.apesClass"
  [@enterLeave]="state"
  (mouseenter)="onEnter()"
  (mouseleave)="onLeave()">
  <div *ngIf="!apesMessage.template" class="{{prefixCls}}-notice-content">
    <div class="{{prefixCls}}-notice-content" [ngClass]="{ 'apes-notification-notice-with-icon': apesMessage.type !== 'blank' }">
      <div [class.apes-notification-notice-with-icon]="apesMessage.type !== 'blank'">
        <ng-container [ngSwitch]="apesMessage.type">
          <i *ngSwitchCase="'success'" class="{{prefixCls}}-notice-icon {{prefixCls}}-notice-icon-success anticon anticon-check-circle-o"></i>
          <i *ngSwitchCase="'info'" class="{{prefixCls}}-notice-icon {{prefixCls}}-notice-icon-info anticon anticon-info-circle-o"></i>
          <i *ngSwitchCase="'warning'" class="{{prefixCls}}-notice-icon {{prefixCls}}-notice-icon-warning anticon anticon-exclamation-circle-o"></i>
          <i *ngSwitchCase="'error'" class="{{prefixCls}}-notice-icon {{prefixCls}}-notice-icon-error anticon anticon-cross-circle-o"></i>
        </ng-container>
        <div class="{{prefixCls}}-notice-message" [innerHTML]="apesMessage.title"></div>
        <div class="{{prefixCls}}-notice-description" [innerHTML]="apesMessage.content"></div>
      </div>
    </div>
  </div>
  <ng-template [ngIf]="apesMessage.template" [ngTemplateOutlet]="apesMessage.template" [ngTemplateOutletContext]="{ $implicit: this }"></ng-template>
  <a tabindex="0" class="{{prefixCls}}-notice-close" (click)="close()">
    <span class="{{prefixCls}}-notice-close-x"></span>
  </a>
</div>
